<template>
  <div class="task">
    <div class="header clearfix">
      <div class="set">
        <span>工序任务</span>
        <el-button type="text" size="mini" icon="el-icon-setting" style="margin-right:20px;font-size:14px"
          @click="processSet">设置
        </el-button>
        <el-checkbox v-model="checked" @change='handleChecked'>包含未开始生产任务</el-checkbox>
      </div>
      <div class="change">
        <span class="el-icon-refresh-right" @click="refresh()">刷新</span>
        <el-radio-group v-model="time" size="mini" @change='handleRadio'>
          <el-radio-button label="today">今天</el-radio-button>
          <el-radio-button label="yesterday">昨天</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="cardList">
      <el-row :gutter="20">
        <el-col :sm="6" :md="6" :lg='6' :xl="4" v-for="item in procedureTaskList" :key="item.id">
          <div class="card clearfix" @click="procedureTable(item.id,item.processCode)">
            <div class="card_top">
              <div class="icon">
                <span class="icon_left" :title="item.processName">{{item.processName}}</span>
                <span class="icon_right"></span>
              </div>
            </div>
            <div class="card_left">
              <!-- <span class="card_left_number">{{item.taskNum}}</span>
              <span class="card_left_name">生产任务数</span> -->
              <el-progress type="circle" :percentage="item.rate" :width='70'></el-progress>
            </div>
            <div class="card_right">
              <div class="amount">
                <span>生产任务数</span>
                <span>{{item.taskNum | formatNum}}</span>
              </div>
              <div class="amount">
                <span>计划数</span>
                <span>{{item.planedNumber | formatNum}}</span>
              </div>
              <div class="amount">
                <span>良品数</span>
                <span style="color:rgb(2, 185, 128)">{{item.goodProductNumber | formatNum}}</span>
              </div>
              <div class="amount">
                <span>不良品数</span>
                <span style="color:rgb(250, 173, 20)">{{item.badProductNumber | formatNum}}</span>
              </div>
            </div>
            <!-- <div class="card_bottom">
              <span class="progress">进度</span>
              <el-progress :percentage="item.rate"></el-progress>
            </div> -->
          </div>
        </el-col>
        <el-empty description="暂无数据" :image-size='100' v-show="!procedureTaskList.length"></el-empty>
      </el-row>
    </div>
    <el-dialog title="生产任务明细报表" :visible.sync="dialogTableVisible" width="800px">
      <el-table :data="detailReport" border
        :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
        :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}">
        <el-table-column property="workOrderCode" label="工单编号" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="productCode" label="产品编号" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="productName" label="产品名称" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="productSpecification" label="产品规格"></el-table-column>
        <el-table-column property="processOrder" label="顺序号"></el-table-column>
        <el-table-column property="processName" label="工序名称" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column property="processState" label="状态"></el-table-column>
        <el-table-column property="actualStartTime" label="实际开始日期" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="actualEndTime" label="实际结束日期" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="planedNumber" label="计划数"></el-table-column>
        <el-table-column property="goodProductNumber" label="良品数"></el-table-column>
        <el-table-column property="badProductNumber" label="不良品数"></el-table-column>
        <div slot="empty">
          <el-empty :image-size="100"></el-empty>
        </div>
      </el-table>
      <el-pagination background layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"
        :page-size='procedureTableParams.limit' v-if="total">
      </el-pagination>
    </el-dialog>
    <el-dialog :visible.sync="processSetFlag" width='968px' class="processSet" :close-on-click-modal='false'
      @close='close'>
      <div slot='title'>
        <p style="font-size: 18px">配置工序</p>
        <p style="font-size: 14px; color: rgb(102,102,102)">可通过拖拽，对面板上的工序进行排序</p>
      </div>
      <div class="box">
        <p class="title">已显示工序</p>
        <div class="isList" id="isList">
          <div v-for="(i, index) in show" :key="index">
            <div class="proItem"  @click="processClick(i.name,i.flag,index)">
              <el-checkbox v-model="i.flag" :label="i.name">
              </el-checkbox>
              <span class="iconfont icon-row"></span>
            </div>
          </div>
        </div>
        <p class="title">已隐藏工序</p>
        <div class="noList">
          <div v-for="(i, index) in hidden" :key="index">
            <div class="proItem" @click="processClick(i.name,i.flag,index)">
              <el-checkbox v-model="i.flag" :label="i.name"></el-checkbox>
              <span class="iconfont icon-row"></span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="processSetFlag = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="confirmProcess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    pmSet
  } from '@/api/homeController'
  import Sortable from "sortablejs"
  export default {
    data() {
      return {
        checked: false,
        time: 'today',
        dialogTableVisible: false,
        processSetFlag: false,
        show: [],
        hidden: [],
        type: 'processSet',
        procedureTableParams: {
          limit: 5,
          page: 1,
          id: 1
        }
      }
    },
    props: {
      procedureTaskList: {
        type: Array,
        default: () => []
      },
      detailReport: {
        type: Array,
        default: () => []
      },
      total: {
        type: Number,
        default: 0
      },
    },
    methods: {
      handleChecked(val) {
        let containNotStart = val ? 1 : 0
        this.$emit('getChecked', containNotStart)
      },
      handleRadio(val) {
        this.$emit('handleRadio', this.time)
      },
      //工序设置 
      getPmSet(data) {
        pmSet(data).then(res => {
          if (res.code == 200 && this.type == 'processSet') {
            this.show = res.data != null && res.data.vos.filter(i => i.flag)
            this.hidden = res.data != null && res.data.vos.filter(i => !i.flag)
            this.dragDrop()
          }
        })
      },
      processSet() {
        this.type = 'processSet'
        this.getPmSet({
          vos: []
        })
        this.processSetFlag = true
      },
      processClick(name, flag, index) {
        this[flag ? 'show' : 'hidden'].splice(index, 1)
        this[flag ? 'hidden' : 'show'].push({
          name,
          flag: !flag
        })
      },
      confirmProcess() {
        this.type = 'confirmProcess'
        this.getPmSet({
          vos: [...this.show, ...this.hidden]
        })
        this.show = this.show.map((i,index) => {
          return {
            name:i.name,
            flag:i.flag,
            index
          }
        })
        this.$emit('filterList',this.show)
        this.processSetFlag = false
        this.utils.showMsg('保存成功', 'success')
      },
      close() {
        this.processSetFlag = false
        this.show = []
        this.hidden = []
      },
      // 拖拽
      dragDrop() {
        const _this = this
        let el = document.getElementById('isList')
        Sortable.create(el, {
          animation: 150,
          onEnd({
            newIndex,
            oldIndex
          }) {
            const currRow = _this.show.splice(oldIndex, 1)[0]
            _this.show.splice(newIndex, 0, currRow)
            let newArray = _this.show.slice(0);
            _this.show = []
            _this.$nextTick(function () {
              _this.show = newArray;
            });
          }
        })
      },
      //刷新
      refresh() {
        this.$emit('refresh')
      },
      //工序任务详情表格
      procedureTable(id,processCode) {
        this.dialogTableVisible = true
        this.procedureTableParams.id = id
        this.$emit('procedureTable', this.procedureTableParams)
      },
      //页码切换
      handleCurrentChange(currentPage) {
        this.procedureTableParams.page = currentPage
        this.$emit('procedureTable', this.procedureTableParams)
      }
    }
  }
</script>

<style lang="less" scoped>
  .task {
    height: calc(100% - 20px);
    padding: 20px 20px 0;
    overflow-y: scroll;

    .header {
      margin-bottom: 10px;
    }

    .set {
      float: left;

      span:nth-child(1) {
        font-size: 18px;
        font-weight: 600;
        color: #1f273d;
        margin-right: 20px;
      }
    }

    .change {
      float: right;

      span:nth-child(1) {
        cursor: pointer;
        color: #409EFF;
        margin-right: 20px;
      }
    }

    .cardList {
      .el-row {
        width: 100%;

        .el-col {
          margin-bottom: 15px;
        }
      }

      .card {
        position: relative;
        cursor: pointer;
        background-color: #fafafa;
        .card_top {
          width: 100%;
          // .icon{
          //   display: flex;
          // }
          .icon_left {
            display: inline-block;
            width: 100%;
            padding: 4px 0;
            // padding-left: 8px;
            color: white;
            text-align: center;
          }
          // .icon_right{
          //     width: 16px;
          //     height: 22px;
          //     border-radius: 0px 0px 100%;
          //     display: inline-block;
          // }
        }
        .card_left,
        .card_right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          float: left;
          padding: 10px;
          width: 40%;
          height: 90px;
          border-bottom: 1px dashed rgb(239, 239, 239);

          .amount {
            width: 100%;


            span:nth-child(1),
            span:nth-child(2) {
              width: 50%;
              display: inline-block;
              text-align: right;
              white-space: nowrap;
            }

            span:nth-child(1) {
              margin-right: 10px;
              font-size: 14px;
              color: rgb(153, 153, 153);
            }

            span:nth-child(2) {
              width: 40%;
              text-align: left;
            }
          }
        }

        .card_left {
          border-right: 1px dashed rgb(239, 239, 239);

          .icon {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 12px;
            color: #fff;
            display: flex;

            .icon_left,
            .icon_right {
              background-color: rgb(40, 194, 228);
            }

            .icon_left {
              display: inline-block;
              padding: 2px 0 2px 8px;
              white-space: nowrap;
              vertical-align: top;
              max-width: 75px;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .icon_right {
              display: inline-block;
              width: 16px;
              height: 20px;
              border-radius: 0px 0px 100%;
            }
          }

          .card_left_number {
            font-size: 26px;
            color: rgba(0, 0, 0, .85);
          }

          .card_left_name {
            font-size: 12px;
            color: rgb(153, 153, 153);
          }
        }

        .card_right {
          justify-content: space-evenly;
          width: 60%;
        }

        .card_bottom {
          float: left;
          width: 100%;
          padding: 7px;
          line-height: 16px;

          .progress {
            color: rgb(153, 153, 153);
            font-size: 12px;
            float: left;
          }

          /deep/ .el-progress-bar {
            width: 85%;
            margin-left: 8px;
          }

          /deep/ .el-progress__text {
            font-size: 10px !important;
            vertical-align: baseline;
          }
        }
      }

      .el-empty {
        padding: 50px 0
      }
    }

    .processSet {
      .box {
        height: 568px;
        background: #fafafa;
        border: 1px solid #e5e5e5;

        .title {
          font-size: 12px;
          margin: 10px 0 5px 15px;
        }

        .isList,
        .noList {
          padding: 0 5px;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          overflow: auto;
          overflow-y: auto;

          >div {
            width: 23%;
            height: 38px;
            margin: 8px;
          }

          .proItem {
            padding: 8px;
            border: 1px solid #e5e5e5;
            background: #fff;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;

            /deep/ .el-checkbox__label {
              width: 140px;
              white-space: nowrap;
              text-overflow: ellipsis;
              vertical-align: bottom;
              overflow: hidden;
            }

            .icon-row {
              color: #409EFF;
            }
          }

          .proItem:hover {
            border: 1px solid #409EFF;
          }

        }

        .isList {
          height: 280px;
          border-bottom: 1px solid #e5e5e5;
        }

        .noList {
          height: calc(100% - 345px);
        }

        /deep/ .el-checkbox__label {
          color: #333;
        }

        /deep/ .el-checkbox__label {
          font-size: 12px;
        }

        /deep/ .el-checkbox {
          pointer-events: none;
        }
      }

      .dialog-footer {
        display: flex;
        justify-content: center;

        button {
          width: 100px;
          padding: 8px 20px;
          font-size: 12px;
        }
      }

      /deep/ .el-dialog__header {
        padding: 20px 40px 10px 40px;
      }

      /deep/ .el-dialog__body {
        padding: 15px 40px 10px 40px;
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 1) {
      .icon_left,
      .icon_right {
        background-color: rgb(40, 194, 228);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 2) {

      .icon_left,
      .icon_right {
        background-color: rgb(116, 130, 229);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 3) {

      .icon_left,
      .icon_right {
        background-color: rgb(250, 173, 20);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 4) {

      .icon_left,
      .icon_right {
        background-color: rgb(61, 210, 126);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 5) {

      .icon_left,
      .icon_right {
        background-color: rgb(0, 185, 190);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 6) {

      .icon_left,
      .icon_right {
        background-color: rgb(24, 144, 255);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 7) {

      .icon_left,
      .icon_right {
        background-color: rgb(255, 89, 80);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 8) {

      .icon_left,
      .icon_right {
        background-color: rgb(228, 191, 83);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 9) {

      .icon_left,
      .icon_right {
        background-color: rgb(147, 181, 77);
      }
    }

    .cardList .el-row .el-col:nth-child(10n + 10) {

      .icon_left,
      .icon_right {
        background-color: rgb(0, 173, 119);
      }
    }

    /deep/ .el-dialog__body {
      padding-top: 10px;
    }
  }
</style>